<template>
	<view class="p-[30rpx]">
		<view class="item" v-for="item in list" :key="item.id">
			<up-image :src="$setBaseUrl(item.appGood.pic)" width="136rpx" height="136rpx" radius="8rpx"></up-image>
			<view class="ml-[24rpx] flex-1">
				<view class="line-clamp-1 text-[30rpx]">{{ item.appGood.name }}</view>
				<view class="text-[24rpx] text-[#666] mt-[12rpx]">规格:{{ sku(item.productJson) }}</view>
			</view>
			<view class="text-right">
				<view class="text-[#FF4D1B] text-[36rpx] font-bold">￥{{ item.price }}</view>
				<view class="text-[28rpx]">×{{ item.num }}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
const props = defineProps({
	list: {
		type: Array,
		default: () => []
	}
});
const sku = (json) => {
	return Object.values(JSON.parse(json)).join(',');
};
</script>

<style lang="scss" scoped>
.item {
	@apply flex items-center justify-between mb-[20rpx] last:mb-0;
}
.tag {
	@apply px-[10rpx] py-[2rpx] bg-[rgba(195,154,113,0.1)] rounded-[4rpx] text-second text-[20rpx] mr-[8rpx] last:mr-0;
}
</style>
